<template>
	<div class="wripper">
		<swiper ref="mySwiper" :options="swiperOptions" >
			<swiper-slide v-for="item in swiperList" :key="item.id">
				<img class="swiper-img" :src="item.imgUrl" alt="">
			</swiper-slide>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination" slot="pagination"></div>
			<!-- 如果需要导航按钮 -->
			<!-- <div class="swiper-button-prev" slot="button-prev"></div> -->
			<!-- <div class="swiper-button-next" slot="button-next"></div> -->
			<!-- 如果需要滚动条 -->
			<!-- <div class="swiper-scrollbar" slot="scrollbar"></div> -->
		  </swiper>
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default{
		data(){
			return {
				swiperOptions:{
					pagination: '.swiper-pagination',//增加小原点
					loop:true,  //轮播图可以全部循环
					autoplay: true,   //打开自动播放
					speed:2000, //自动播放速度
					initialSlide :1,
					// autoplay : {
					//     delay:3000
					// },
					// grabCursor : true//设置鼠标变化
				},
				
			}
		},
		computed:{
			...mapGetters(['swiperList'])
		},
		mounted(){
		},
		methods:{
			
		}
	}
	
</script>

<style lang="stylus" scoped>
	//这样表示穿透，不受scoped的影响
	.wripper >>> .swiper-pagination-bullet-active
		background :#fff
	.swiper-img
		width:100%
</style>
